<template>
  <div class="kox">
    <Row :gutter="16">
        <Col class="count" span="4">
          <Row>
            <Col span="6">
              <img :src="'../../static/images/icon/wallet.png'" alt="">
            </Col>
            <Col span="18">
              <span>998.00</span>
              <p>今日订单总金额</p>
            </Col>
          </Row>
        </Col>
        <Col class="count" span="4">
          <Row>
            <Col span="6">
              <img :src="'../../static/images/icon/publish.png'" alt="">
            </Col>
            <Col span="18">
              <span>32</span>
              <p>商品发布数</p>
            </Col>
          </Row>
        </Col>
        <Col class="count" span="4">
          <Row>
            <Col span="6">
              <img :src="'../../static/images/icon/order.png'" alt="">
            </Col>
            <Col span="18">
              <span>154</span>
              <p>订单总数</p>
            </Col>
          </Row>
        </Col>
        <Col class="count" span="4">
          <Row>
            <Col span="6">
              <img :src="'../../static/images/icon/sale.png'" alt="">
            </Col>
            <Col span="18">
              <span>99</span>
              <p>本月销量</p>
            </Col>
          </Row>
        </Col>
        <Col class="count" span="4">
          <Row>
            <Col span="6">
              <img :src="'../../static/images/icon/success.png'" alt="">
            </Col>
            <Col span="18">
              <span>0.00</span>
              <p>已完成订单数</p>
            </Col>
          </Row>
        </Col>
        <Col class="count" span="4">
          <Row>
            <Col span="6">
              <img :src="'../../static/images/icon/close.png'" alt="">
            </Col>
            <Col span="18">
              <span>0.00</span>
              <p>已取消订单数</p>
            </Col>
          </Row>
        </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {};
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.kox {
  margin: 10px;
}
.count {
  border-right: 1px solid #e5e5e5;
}
.count:last-child:after {
  border: 0;
}
.count span {
  font-size: 22px;
  font-weight: bold;
  color: #2d8cf0;
}
.count p {
  color: #9ea7b4;
  font-size: 14px;
}
.count img {
  margin-top: 10px;
}
</style>
